import React from 'react';
import {Route} from 'react-router-dom';
import Loadable from 'react-loadable';
// import { renderRoutes } from 'react-router-config';
import Loading from '../components/loading';


// const A11 = Loadable({
//     loader: ()=> { 
//         console.log('start import loading', +new Date());
//         return import('../pages/a/route.js').then(({A11})=> A11)
//     },
//     delay: 0,
//     loading: Loading
// });

// const A12 = Loadable({
//     loader: ()=> import('../pages/a/route.js').then(({A12})=> A12),
//     delay: 0,
//     loading: Loading
// })

// const A13 = Loadable({
//     loader: ()=> import('../pages/a/route.js').then(({A13})=> A13),
//     delay: 0,
//     loading: Loading
// })

// const B11 = Loadable({
//     loader: ()=> import('../pages/b/route.js').then(({B11})=> B11),
//     delay: 0,
//     loading: Loading
// });

// const B12 = Loadable({
//     loader: ()=> import('../pages/b/route.js').then(({B12})=> B12),
//     delay: 0,
//     loading: Loading
// })

// const B13 = Loadable({
//     loader: ()=> import('../pages/b/route.js').then(({B13})=> B13),
//     delay: 0,
//     loading: Loading
// })

const list = [{
    key: 'A11',
    url: '../pages/a/route.js',
    import: ()=> import('../pages/a/route.js'),
    path: '/a/a11',
    type: 'a'
},
{
    key: 'A12',
    url: '../pages/a/route.js',
    import: ()=> import('../pages/a/route.js'),
    path: '/a/a12',
    type: 'a'
    
},
{
    key: 'A13',
    url: '../pages/a/route.js',
    import: ()=> import('../pages/a/route.js'),
    path: '/a/a13',
    type: 'a'
    
},
{
    key: 'B11',
    url: '../pages/b/route.js',
    import: ()=> import('../pages/b/route.js'),
    path: '/b/b11',
    type: 'b'
    
},
{
    key: 'B12',
    url: '../pages/b/route.js',
    import: ()=> import('../pages/b/route.js'),
    path: '/b/b12',
    type: 'b'
    
},
{
    key: 'B13',
    url: '../pages/b/route.js',
    import: ()=> import('../pages/b/route.js'),
    path: '/b/b13',
    type: 'b'
},
{
    key: 'B14',
    url: '../pages/b/route.js',
    import: ()=> import('../pages/b/route.js'),
    path: '/b/b14',
    type: 'b'
},
{
    key: 'B15',
    url: '../pages/b/route.js',
    import: ()=> import('../pages/b/route.js'),
    path: '/b/b15',
    type: 'b'
    
}
]

const routes  =  (
    <div className='content'>

        {
            list.map(val=> {
                return (
                    <Route exact path={val.path} key={val.key} component={
                        Loadable({
                            loader: ()=> val.import().then((e)=> {
                                console.log(e);
                                if(e.default) {
                                    return e.default[val.key]
                                }
                                return e[val.key]
                            }),
                            delay: 800,
                            loading: Loading
                        })
                    } />
                )
            })
        }
    </div>
)

export default routes;